<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 只读计算属性 -->
        <input :value="getName">
        <!-- 双向绑定加读写计算 -->
        <input v-model:value="getAndSetFullName">

        <h1>{{age}}</h1>
        <button @click="add">+1</button>
        <button @click="cut">-1</button>

        <button @click="changeObj">点击改变对象中的num属性值</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                firstName: 'Huang',
                lastName: 'Wenhao',
                fullName: 'HuangWenhao',
                age: 21,
                obj: {
                    num: 0
                }
            },
            computed: {
                //只读计算属性
                getName(){
                    return this.firstName + this.lastName;
                },
                // 读写计算
                getAndSetFullName: {
                    get(){
                        return this.fullName;
                    },
                    set(value){
                        this.fullName = value;
                        console.log(this.fullName);
                    }
                }

            },
            //methods计算属性
            methods: {
                add(){
                    this.age = ++this.age;
                },
                cut(){
                    this.age = --this.age;    
                },
                changeObj(){
                    this.obj.num = ++this.obj.num;
                }
            },
            watch: {
                //监听obj对象
                // obj: {
                //     handler(){
                //         window.alert('对象属性被改变');
                //     },
                //     deep: true, //深层监听
                //     // immediate: true  一上来就要触发
                // },
                //监听obj中的num属性
                'obj.num' (newValue,oldValue){
                    window.alert('obj的num被改变')
                }
            }
        })
        
    </script>
</body>
</html>